<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isBg="false"></HeadCustom>
		<view class="mobile-box fboxCol bg-white color-0F0400">
			<view class="hd fboxRow Ycenter font46 color-E8CDA7 fwb">手机号登录/注册</view>
			<view class="bd">
				<view class="item fboxRow Ycenter">
					<view class="fboxRow Ycenter flex1">
						<text class="bwfont bw-Vector4 color-6B707C"></text>
						<input class="uni-input flex1" placeholder="输入手机号码" type="number" maxlength="11"
							v-model.trim="fromData.mobile" @input="inputChange" />
						<icon v-if="fromData.mobile" @click="clearIcon(1)" class="icon" type="clear" size="40rpx" />
					</view>
				</view>
				<view class="item fboxRow Ycenter item-code">
					<view class="fboxRow Ycenter flex1">
						<text class="bwfont bw-suo color-6B707C"></text>
						<input class="uni-input flex1" placeholder="输入验证码" type="number" maxlength="6"
							v-model.trim="fromData.code" @input="inputChange" />
						<icon style="margin-right: 20rpx;" v-if="fromData.code" @click="clearIcon(2)" class="icon"
							type="clear" size="40rpx" />
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒"></u-code>
						<button class="btn-code fboxRow Ycenter Xcenter" @tap="getCode">{{tips}}</button>
					</view>
				</view>
				<view class="btn-group">
					<!-- <view class="btn fboxRow Ycenter Xcenter bg-linear font30  flex1 color-141720" @click="confimTap">登录</view> -->
					<button :loading="loading" class="btn fboxRow Ycenter Xcenter bg-linear font30  flex1 color-141720"
						@click="confimTap">
							<text v-if="isCountDown">{{countDown/1000}}S后再试</text>
							<text v-else>登录</text>
					</button>
				</view>
			</view>
			<view class="flex1"></view>
			<view class="ft fboxRow Ycenter font24">
				<!-- <u-checkbox-group v-model="fromData.checked" activeColor="none" inactiveColor="#E8CDA7" iconColor="#E8CDA7">
					<u-checkbox value="1" size="32rpx"  labelSize="22rpx" shape="circle" label="我已阅读并同意本无名片"></u-checkbox>
				</u-checkbox-group> -->
				<label class="fboxRow Ycenter" for="" @click="checkTap">
					<view class="checkbox fboxRow Ycenter Xcenter" :class="[fromData.checked ? 'check' :'']">
						<u-icon v-if="fromData.checked" size="32rpx" name="checkmark" color="#E8CDA7"></u-icon>
					</view>
					我已阅读并同意本无名片
				</label>
				<text class="color-mark" @click="$pageTo('/about/index?settingCode=user')">《用户协议》</text>和<text
					class="color-mark" @click="$pageTo('/about/index?settingCode=privacy')">《隐私政策》</text>
			</view>
			<view class="ft-space"></view>
		</view>
		<view class="modal-black">
			<u-popup :show="isModal" @close="isModal = false" mode="center">
				<view class="join-Modal">
					<view class="close" @click="isModal = false"><u-icon name="close" color="#6B707C"
							size="20"></u-icon></view>
					<view class="hd font30 lh44 color-E8CDA7">账号暂时无法登录</view>
					<view class="bd">
						<view class="tips color-ACB4C7 font30 lh44">根据用户举报、经判断您的账号因状态异常或者涉嫌发布违法违规内容，已被暂时禁用。</view>
					</view>
					<!-- <view class="ft mt32 fboxRow Xend">
						<view class="btn fboxRow Ycenter Xcenter btn-gray font26"
							@click="isModal = false">取消</view>
						<view class="btn fboxRow Ycenter Xcenter bg-linear color-141720 font26" @click="lookTap">查看原因</view>
					</view> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		notifySms,
		oauthSms,
		oauthSmsWechat
	} from '@/api/index.js';
	import {
		currentMember
	} from '@/api/recruit.js';
	import {
		registerConnect,
		completeInformation
	} from '@/api/mine.js';
	import {
		validPhone
	} from '@/static/js/validate.js';
	import {
		getRequest,
		throttle,
		debounce,
		parseQueryStringt
	} from '@/static/js/common.js';
	import {
		utf8to16,
		base64decode,
		base64encode
	} from '@/static/js/Base64.js';
	export default {
		props: {},
		data() {
			return {
				tips: '发送验证码',
				fromData: {
					mobile: '',
					code: '',
					checked: false
				},
				userInfo: {},
				memberId: '',
				isMobile: false,
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				params: {},
				isDisable: false,
				isModal: false,
				loading: false,
				isCountDown: false,
				countDown: 0
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.memberId = option.id
			}
		},
		onShow() {
			uni.removeStorageSync('bw_params');
			uni.removeStorageSync('bw_user_temp');
		},
		methods: {
			clearIcon(type) {
				if (type == 1) {
					this.fromData.mobile = ''
				} else {
					this.fromData.code = ''
				}
			},
			inputChange(){
				this.isDisable = false
			},
			getUser() {
				// 关闭当前页面 返回详细信息页面
				currentMember().then(res => {
					if (res.code == 0) {
						if (this.isDisable) {
							uni.removeStorageSync('bw_params');
							uni.removeStorageSync('bw_user_temp');
						} else {
							getApp().globalData.loginCount = 2
							uni.setStorageSync('bw_user_temp', JSON.stringify(res.data));
							const bw_link = getApp().getBWData(['bw_link']).bw_link
							if (res.data.isFirstLogin) {
								getApp().globalData.loginFirst = true
								// 挂接关系
								// #ifdef H5
								if (bw_link.link) {
									const link_user = {
										sharerId: bw_link.sharerId,
										href: bw_link.href,
										memberId: res.data.memberId
									}
									this.getLink(link_user)
								}
								// #endif
								// 跳过
								// completeInformation({}).then(res => {})
								// 完善用户信息
								// this.$pageTo('/perfectuserName', 'redirectTo')
							}
							// } else {
							const link = {
								sharerId: res.data.memberId
							}
							bw_link.link = decodeURIComponent(base64encode(JSON.stringify(link)))
							bw_link.sharerId = res.data.memberId
							uni.setStorageSync('bw_link', JSON.stringify(bw_link))
							if (bw_link.loginSource) {
								let url = bw_link.loginSource.substring(bw_link.loginSource.indexOf('#') + 1,
									bw_link.loginSource.length)
								if (bw_link.loginSource.includes('?')) {
									const urlObj = parseQueryStringt(bw_link.loginSource);
									urlObj.bwlink = bw_link.link
									url = bw_link.loginSource.substring(bw_link.loginSource.indexOf('#') + 1,
										bw_link.loginSource.indexOf("?") + 1)
									for (let i in urlObj) {
										url += `${i}=${urlObj[i]}&`
									}
									if (url.substring(url.length - 1) == '&') {
										url = url.substring(0, url.length - 1)
									}
								}
								this.$pageTo(url, 'redirectTo')
							} else {
								// #ifdef H5
								this.$pageTo('/index/index', 'redirectTo')
								// #endif
								// #ifdef MP
								uni.navigateBack()
								// #endif
							}
							// }
						}
					}
				})
			},
			// 会员关系挂接 
			getLink(link_user) {
				const href = link_user.href
				registerConnect({
					connectType: link_user.sharerId ? 1 : 0,
					parentMemberId: link_user.sharerId,
					connectSource: href,
					// connectSource: href.substr(0, href.indexOf("?")),
					platformType: 'h5',
					shareDataId: href.substring(href.indexOf("?") + 1)
				}).then(res => {})
			},
			codeChange(text) {
				this.tips = text;
			},
			checkTap() {
				this.fromData.checked = !this.fromData.checked
			},
			lookTap() {
				// this.$pageTo('/mine/disable?id=' + res.data.memberId)
				// uni.setStorageSync('bw_params', JSON.stringify(this.params));
				// this.getUser()
			},
			getCode() {
				if (!this.fromData.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}
				if (!validPhone(this.fromData.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				// 当前用户被禁用了
				if(this.isDisable){
					this.isModal = true
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					notifySms({
						type: 'LOGIN',
						mobile: this.fromData.mobile
					}).then(res => {
						console.log(res)
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			countDownFun(){
				this.countDown = 4000
				const timer = setInterval(()=>{
					this.isCountDown = true
					this.countDown = this.countDown - 1000
					if(this.countDown <= 0){
						this.isCountDown = false
						clearTimeout(timer)
					}
				},1000)
			},
			submit: debounce(function() {
				this.loading = true
				const {
					mobile,
					code,
					checked
				} = this.fromData
				let api = oauthSms
				// #ifdef MP
				api = oauthSmsWechat
				// #endif
				api({
					"code": code,
					"mobile": mobile
				}).then(res => {
					try {
						if (res.message == '账户被禁用') {
							this.params = res.data
							this.isModal = true
							this.isDisable = true
						} else {
							this.isDisable = false
							uni.setStorageSync('bw_params', JSON.stringify(res.data));
							this.getUser()
						}
					} catch (e) {
						// error
						console.log(e)
					}
				}).catch(err => {
					if (err.code == 400405) {
						this.params = err.data
						this.isModal = true
						this.isDisable = true
						// uni.setStorageSync('bw_params', JSON.stringify(err.data));
					}
				}).finally(() => {
					this.loading = false
					if(!this.isCountDown){
						this.countDownFun()
					}
				})
			}, 3000),
			// throttle debounce
			confimTap() {
				const { mobile, code, checked } = this.fromData
				if (!mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}
				if (!validPhone(mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				if (!code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				if (!checked) {
					uni.showToast({
						icon: 'none',
						title: '请勾选用户协议'
					})
					return false
				}
				// 当前用户被禁用了
				if(this.isDisable){
					this.isModal = true
					return false
				}
				// 提交登录
				this.submit()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page-wrap {
		min-height: calc(100vh);
	}

	.color-mark {
		color: var(--contentSearchTitleColor)
	}

	.icon {
		color: var(--translucenceButtonBackOneColor)
	}

	.icon /deep/.uni-icon-clear {
		color: var(--translucenceButtonBackOneColor)
	}

	.mobile-box {
		padding: 84rpx 70rpx 0;
		min-height: calc(88vh);
	}

	.mobile-box .hd {
		padding: 0 20rpx;
		height: 100rpx;
	}

	.mobile-box .bd {
		padding: 66rpx 20rpx 0;
	}

	.mobile-box .item {
		margin-top: 60rpx;
		padding: 0 40rpx;
		height: 104rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx;
	}

	.mobile-box .item.item-code {
		padding-right: 0;
	}

	.uni-input-placeholder {
		z-index: 2;
	}

	.uni-input-input {
		z-index: 3;
		user-select: all;
	}

	.uni-input {
		padding: 0 16rpx;
		width: 100%;
	}

	.btn-code {
		// padding: 0 40rpx;
		// margin-right: -40rpx;
		width: 218rpx;
		height: 104rpx;
		font-size: 30rpx;
		border-radius: 0rpx 12rpx 12rpx 0rpx;
	}

	[data-theme='night-theme'] .btn-code {
		color: var(--buttonOutlineTwoColor);
		background: var(--buttonOutlineOneColor);
	}

	[data-theme='lightBlue-theme'] .btn-code {
		color: var(--buttonTextColor);
		background: var(--buttonOutlineOneColor);
	}
	.btn-group {
		margin-top: 126rpx;
	}

	.btn-group .btn {
		// width: 570rpx;
		height: 88rpx;
		font-weight: 500;
		border-radius: 12rpx;
	}

	.checkbox {
		margin-right: 12rpx;
		border: 1rpx solid #E8CDA7;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.ft {
		white-space: nowrap;
		color: var(--contentFontLightColor)
	}

	.ft-space {
		height: 69rpx;
	}
	/deep/.u-popup__content{border-radius: 12rpx;}
	.join-Modal {
		position: relative;
		padding: 40rpx 32rpx 48rpx;
		width: 670rpx;
		background: var(--viewBgColor);
		border-radius: 12rpx
	}

	.join-Modal .bd {
		margin-top: 48rpx;
	}

	.join-Modal .text {
		padding: 24rpx;
		width: 558rpx;
		border-radius: 12rpx
	}

	.join-Modal .btn {
		width: 160rpx;
		height: 56rpx;
		border-radius: 8rpx
	}
	.btn-gray{background-color: var(--viewDivisionColor);color: var(--titleFontColor);}

	.join-Modal .btn+.btn {
		margin-left: 24rpx;
	}

	.join-Modal .close {
		position: absolute;
		right: 32rpx;
		top: 32rpx;
	}
</style>